<!-- 左信息单元组件 -->
<template>
    <div class="rivHeadUnit">
        <el-avatar shape="square" @click="handleClick" size="medium" :src="avatarPath" />
    </div>
    <div class="DescribeUnit">
        <el-text type="info">{{ displayName }}</el-text>
    </div>
    <div class="textUnit">
        <div class="rivTextShow">{{ unit.message }}</div>
    </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    message: {
        type: Object,
        required: true
    },
    unit: {
        type: Object,
        required: true
    }
});

const avatarPath = computed(() => props.message.message.avatarPath);

const displayName = computed(() => {
    return (
        props.message.remark ||
        props.message.message.nickname ||
        props.message.message.username
    );
});

const emit = defineEmits(['showMessageEvent']);

const handleClick = () => {
    emit('showMessageEvent');
};
</script>

<style scoped>
/* 左信息单元,显示接收到的数据 */
.rivHeadUnit {
    grid-area: 3 / 2 / 10 / 4;
    cursor: pointer;
}

.DescribeUnit {
    grid-area: 3 / 3 / 5 / 12;
}

/* 文本单元 */
.textUnit {
    grid-area: 5 / 3 / 15 / 15;
    padding: 15px;
    overflow-wrap: break-word;
}

.rivTextShow:hover {
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5))
}

/* 接收到的文本样式 */
.rivTextShow {
    float: left;
    background: #e2e2e2;
    color: #000000;
    padding: 10px;
    overflow-wrap: break-word;
    border-radius: 10px;
    max-width: 60%;
}
</style>